<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>报名与预约</template>
                    <el-menu-item-group>
                        <template slot="title">报名</template>
                        <el-menu-item index="1-1" @click.native="show = 'enroll'">报名</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="预约">
                        <el-menu-item index="1-3" @click.native="show = 'order'">预约</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <!--<el-header style="text-align: right; font-size: 12px">-->
                <!--<el-dropdown>-->
                    <!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                        <!--<el-dropdown-item>查看</el-dropdown-item>-->
                        <!--<el-dropdown-item>新增</el-dropdown-item>-->
                        <!--<el-dropdown-item>删除</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                <!--</el-dropdown>-->
                <!--<span>王小虎</span>-->
            <!--</el-header>-->

            <el-main v-if="show == 'enroll'">
                <el-table :data="tableDataE">
                    <el-table-column prop="create_time" label="日期" width="200">
                    </el-table-column>
                    <el-table-column prop="area" label="区域" width="120">
                    </el-table-column>
                    <el-table-column prop="shop" label="店名" width="120">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120">
                    </el-table-column>
                    <!--<el-table-column prop="address" label="地址">-->
                    <!--</el-table-column>-->
                </el-table>
            </el-main>
            <el-main v-else>
                <el-table :data="tableDataO">
                    <el-table-column prop="create_time" label="日期" width="200">
                    </el-table-column>
                    <el-table-column prop="area" label="区域" width="120">
                    </el-table-column>
                    <el-table-column prop="shop" label="店名" width="120">
                    </el-table-column>
                    <el-table-column prop="meituan" label="美团外卖情况" width="120">
                    </el-table-column>
                    <el-table-column prop="elema" label="饿了吗情况" width="120">
                    </el-table-column>
                    <el-table-column prop="changelic" label="是否更换营业执照" width="200">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="style" label="店铺类型">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted(){
            this.getEnroll();
            this.getOrder();
        },
        data: function() {
            return {
                show:'enroll',
                tableDataE: [],
                tableDataO:[]
            }
        },
        methods:{
            getEnroll(){
                axios.get('http://dbkj.lgycloud.com/getEnroll')
                .then(res=>{
                  	console.log(res);
                    this.tableDataE = res.data;
                })
                .catch(res=>{

                })
            },
            getOrder(){
                axios.get('http://dbkj.lgycloud.com/getOrder')
                .then(res=>{
                  	console.log(res);
                    this.tableDataO = res.data;
                })
                .catch(res=>{

                })
            },
            changeShow(){
                this.show = this.show === 'enroll' ? 'order' : 'enroll';
            }
        },
        computed:{
            
        }
    })
</script>
</html>